<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 事件系统</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='../documentation/'>
							文档
						</a>
					</li>
					<li>
						<a href='../documentation/entities.html'>
							实体
						</a>
					</li>
					<li>
						<a href='../documentation/events.html'>
							事件
						</a>
					</li>
					<li>
						<a href='../documentation/components.html'>
							组件
						</a>
					</li>
					<li>
						<a href='../documentation/2d.html'>
							2D绘图
						</a>
					</li>
					<li>
						<a href='../documentation/text.html'>
							文本
						</a>
					</li>
					<li>
						<a href='../documentation/keyboard.html'>
							键盘
						</a>
					</li>
					<li>
						<a href='../documentation/mouse.html'>
							鼠标
						</a>
					</li>
					<li>
						<a href='../documentation/sound.html'>
							声音
						</a>
					</li>
					<li>
						<a href='../documentation/sprites.html'>
							精灵
						</a>
					</li>
					<li>
						<a href='../documentation/scenes.html'>
							场景
						</a>
					</li>
					<li>
						<a href='../documentation/gameloop.html'>
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		

		<h2> 事件系统 </h2>
<p>Crafty 使用组件进行通信。</p>
<p>基本思想是将函数绑定到命名事件。当事件被触发时,函数会被直接调用。这里有一个简单的例子:</p>
<pre><code><span class="hljs-comment">// Create a red square</span>
<span class="hljs-keyword">var</span> square = Crafty.e(<span class="hljs-string">"2D, Canvas, Color"</span>)
        .attr({<span class="hljs-attr">x</span>:<span class="hljs-number">10</span>,<span class="hljs-attr">y</span>:<span class="hljs-number">10</span>, <span class="hljs-attr">w</span>:<span class="hljs-number">30</span>, <span class="hljs-attr">h</span>:<span class="hljs-number">30</span>})
        .color(<span class="hljs-string">"blue"</span>);

<span class="hljs-comment">// When a "Blush" event is triggered, turn pink</span>
square.bind(<span class="hljs-string">"Blush"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// the function will be called in the context of the entity</span>
    <span class="hljs-keyword">this</span>.color(<span class="hljs-string">"pink"</span>)
});

<span class="hljs-comment">// Trigger the event, causing the square to turn pink</span>
square.trigger(<span class="hljs-string">"Blush"</span>);</code></pre>
<p>在上边，我们为实体绑定了一个事件，然后立刻触发它。更典型的情况是，我们在游戏逻辑的其他地方来触发它。您可以将多个函数绑定到同一事件，但一般不应依赖它们按特定顺序执行。</p>
<p>每个实体都有一些与事件有关的方法，这在文档 <a href="../api/Crafty Core.html">Crafty Core</a>.  有详细的介绍。</p>
<h2 id="passing-data">传递数据</h2>
<p>很多事件都会传递数据给绑定的函数。让我们修改上边的代码来定义一个更通用的 &quot;ChangeColor&quot; 事件:</p>
<pre><code>square.bind(<span class="hljs-string">"ChangeColor"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">color</span>) </span>{
    <span class="hljs-keyword">this</span>.color(color);
});

square.trigger(<span class="hljs-string">"ChangeColor"</span>, <span class="hljs-string">"pink"</span>); <span class="hljs-comment">// Turn pink</span></code></pre>
<p>当你触发事件时，第二个参数可以传递一个值。这不会对你造成限制，因为你也可以传递一个对象 —— 例如，你想 <code>&quot;ChangeColor&quot;</code> 使用 RGB 值来代替颜色名称：</p>
<pre><code><span class="hljs-comment">// Assume that color is an object</span>
square.bind(<span class="hljs-string">"ChangeColor"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">color</span>) </span>{
    <span class="hljs-keyword">this</span>.color(color.r, color,g, color.b);
})

<span class="hljs-comment">// Specify the RGB values corresponding to pink</span>
square.trigger(<span class="hljs-string">"ChangeColor"</span>, {<span class="hljs-attr">r</span>:<span class="hljs-number">255</span>, <span class="hljs-attr">g</span>:<span class="hljs-number">192</span>, <span class="hljs-attr">b</span>:<span class="hljs-number">203</span>});</code></pre>
<h2 id="unbinding-events">解绑事件</h2>
<p>要解绑一个事件，你需要绑定函数的引用，所以它不能是匿名的。修改我们之前的例子：</p>
<pre><code><span class="hljs-keyword">var</span> turnPink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ 
    <span class="hljs-keyword">this</span>.color(<span class="hljs-string">"pink"</span>);
}

<span class="hljs-comment">// Bind the function to an event</span>
square.bind(<span class="hljs-string">"Blush"</span>, turnPink);

<span class="hljs-comment">// Immediately unbind it!</span>
square.unbind(<span class="hljs-string">"Blush"</span>, turnPink);</code></pre>
<p>有时候你希望函数只被触发一次，这时，你可以使用 <code>.one()</code> 来代替 <code>.bind()</code> 进行绑定:</p>
<pre><code><span class="hljs-comment">// Use the .one() method instead of .bind()</span>
square.one(<span class="hljs-string">"JumpRight"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Move 10 px to the right</span>
    <span class="hljs-keyword">this</span>.x += <span class="hljs-number">100</span>;
});

<span class="hljs-comment">// If we trigger the event twice, the bound function will be called only the first time</span>
square.trigger(<span class="hljs-string">"JumpRight"</span>);
square.trigger(<span class="hljs-string">"JumpRight"</span>);</code></pre>
<h2 id="working-with-built-in-events">内置事件</h2>
<p>很多 Crafty 内置的组件都会触发事件，大部分有用的事件都可以在 API 文档中找到。例如， <a href="../api/2D.html"><code>2D</code> 组件</a> 在位置改变的时候会触发 &quot;Move&quot; 事件 , 并且该事件会传递一个表示旧位置的对象。</p>
<pre><code><span class="hljs-comment">// Bind a function to the "Move" event</span>
<span class="hljs-comment">// It will log the initial and new x position anytime the entity moves</span>
square.bind(<span class="hljs-string">"Move"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">oldPosition</span>) </span>{
    <span class="hljs-built_in">console</span>.log(oldPosition._x, <span class="hljs-keyword">this</span>.x);
});

square.x = <span class="hljs-number">100</span>; <span class="hljs-comment">// Will print "10, 100"</span></code></pre>
<p>在 Crafty 的 <a href="../api/">API</a> 文档中，内置事件都是高亮的绿色。</p>
<h2 id="global-events">全局事件</h2>
<p>到目前为止，我们讨论的所有事件都是针对某个特定实体的。但事件也可以在全局触发 —— 将在所有实体上触发。</p>
<pre><code><span class="hljs-comment">// Define two entities at x=5 and x=10</span>
<span class="hljs-keyword">var</span> varrick = Crafty.e(<span class="hljs-string">"2D"</span>).attr({<span class="hljs-attr">x</span>:<span class="hljs-number">5</span>});
<span class="hljs-keyword">var</span> xhuli = Crafty.e(<span class="hljs-string">"2D"</span>).attr({<span class="hljs-attr">x</span>:<span class="hljs-number">10</span>});

<span class="hljs-comment">// Bind to an event called "Thing"</span>
varrick.bind(<span class="hljs-string">"Thing"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.x += <span class="hljs-number">20</span>; });
xhuli.bind(<span class="hljs-string">"Thing"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.x += <span class="hljs-number">10</span>; });

<span class="hljs-comment">// Do the thing!</span>
<span class="hljs-comment">// varrick and xhuli will *both* move to the right</span>
Crafty.trigger(<span class="hljs-string">"Thing"</span>);

<span class="hljs-comment">// You can still trigger the same events directly on an entity</span>
xhuli.trigger(<span class="hljs-string">"Thing"</span>);</code></pre>
<p>你也可以直接在 Crafty 对象上绑定事件：</p>
<pre><code>Crafty.bind(<span class="hljs-string">"Thing"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Crafty does the thing."</span>)
});</code></pre>
<p>在全局绑定的函数中，上下文 this 为全局的 Crafty 对象(<code>this === Crafty</code>)。</p>
<p>和你想的一样,<code>Crafty.unbind()</code> 和 <code>Crafty.one()</code> 也是这样!</p>
<p>你将在 <a href="../documentation/gameloop.html">游戏循环</a> 章节中，了解到一个非常重要的事件 &quot;EnterFrame&quot;。</p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
